<template>
	<div class="content">
		<div class="contanier">
			<div class="nav">
				<span> 您当前的位置： </span>
				<a @click="$router.push({ name: 'index' })">考试系统</a> /
				<span> 通知公告 </span>
			</div>
			<div class="main">
				<div class="rightmain">
					<div class="title">{{title}}</div>
					<div class="zcontent" v-html="content"></div>
				</div>
			</div>
		</div>
		<nav-footer style="position: absolute;bottom: 0;"></nav-footer>
	</div>
</template>

<script>
	import NavFooter from '../../components/footer.vue'
	export default {
		data() {
			return {
				id: this.$route.query.id,
				title: '',
				content: ''
			};
		},
		components: { NavFooter, },
		computed: {},
		mounted() {
			this.getgonggao()
		},
		methods: {
			async getgonggao() {
				var res = await this.$api.Notice.Getdetail(this.id)
				this.title = res.data.title
				this.content = res.data.content
			},
		},
	};
</script>

<style lang="less" scoped>
	.content {
		width: 100%;

		.contanier {
			width: 1200px;
			margin: 0 auto;
			overflow: hidden;

			.nav {
				width: 1200px;
				margin: 0 auto;
				height: 16px;
				display: flex;
				flex-direction: row;
				align-items: center;
				font-size: 16px;
				color: #999999;
				line-height: 16px;
				margin-top: 30px;
				margin-bottom: 30px;

				a {
					height: 16px;
					font-size: 16px;
					font-weight: 400;
					color: #999999;
					line-height: 16px;
					margin-right: 6px;

					&:not(:first-of-type) {
						margin-left: 6px;
					}
				}

				span {
					height: 16px;
					margin-left: 6px;
					font-size: 16px;
					font-weight: 400;
					color: #666666;
					line-height: 16px;
				}
			}

			.main {
				width: 100%;
				padding: 0;
				margin: 0;
				background-color: #fff;
				min-height: 400px;
				--tw-shadow: 0 10px 15px -3px rgb(0 0 0/0.1), 0 4px 6px -4px rgb(0 0 0/0.1);
				--tw-shadow-colored: 0 10px 15px -3px var(--tw-shadow-color), 0 4px 6px -4px var(--tw-shadow-color);
				-webkit-box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
				box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);

				.rightmain {
					width: 100%;
					padding: 30px 20px 20px;

					.title {
						height: 70px;
						color: #3C3C3C;
						font-size: 26px;
						font-weight: bold;
						display: flex;
						justify-content: center;
						align-items: center;
					}

					.zcontent {
						color: #595959;
						font-size: 16px;
						line-height: 32px;
						background-color: #fff;
						margin-top: 8px;
					}
				}

			}

		}
	}
</style>
